import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import * as Animatable from 'react-native-animatable';
const scale = GLOBAL.SCALE;
/* 

*/

export class MorePage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			iconUp: true
		}
	}
	setIcon () {
		const { iconUp } = this.state;
		if (iconUp) {
			this.arrowIcon.transitionTo({ rotate: '180deg' })
		} else {
			this.arrowIcon.transitionTo({ rotate: '0deg' })
		}
		this.setState({
			iconUp: !iconUp
		})
	}

	arrowRef = ref => this.arrowIcon = ref;

	render () {
		let { onPressFn, text, moreImgHide } = this.props;
		return (
			<View style={styles.moreBox}>
				<TouchableOpacity style={styles.more} onPress={() => {
					onPressFn && onPressFn();
					this.setIcon();
				}}>
					{
						moreImgHide ? null :
							<View>
								<Animatable.Image ref={this.arrowRef} source={require('../../../../imgs/Group.png')} style={[styles.moreImg, { tintColor: "#55ADF0" }]} />
							</View>
					}
					<Text style={styles.moreText}>{text}</Text>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	moreBox: {
		flexDirection: 'row',
		justifyContent: 'center',
		backgroundColor: style.color.themeColor

	},
	more: {
		// flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		paddingTop: 19 * scale,
		paddingBottom: 10,
		marginBottom: 50 * scale,
		width: '100%',
		height: 70
	},
	moreText: {
		marginTop: 10 * scale,
		fontSize: 11 * scale,
		color: '#fff',
		textAlign: 'center',
		opacity: 0.9
	},
	moreImg: { width: 15 * scale, height: 7 * scale, marginLeft: 3 * scale },
})